<template>
  <div>
<p>你要买的商品数量:{{coumt}}</p> 
<!-- 绑定事件 v-on:事件名 或 @:事件名 -->
<!-- 语法: v-on:事件名="少量代码" -->
<!-- 语法: v-on:事件名="methods里面的函数名" -->
<!-- 语法: v-on:事件名="methods里面的函数名(值)" -->
<!-- 缩写语法@:事件名 -->
<button v-on:click="coumt= coumt + 1">+1</button>
<button v-on:click="a">+1</button>
<button v-on:click="b(5)">+5</button>
<button @click = "c">减少1</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      coumt:1
    }
  },
  // 定义函数
methods:{
 // this指向的export default {}  data函数会把对象挂到当前组件对象上
    a(){
       this.coumt++ 
    },
    b(num){
      this.coumt = this.coumt + num
    },
    c(){
      this.coumt--
    }
}
}
</script>

<style>

</style>